import React from 'react';
import './style.css'
export default class LoadMore extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div  className="loadMore" ref="wraper">
        {this.props.isLoading?<span>loading....</span>:
          <span onClick={this.loadMoreData.bind(this)}>加载更多</span>
        }
      </div>
    )
  }
  loadMoreData(){
    this.props.loadMoreFn()
  }
  componentDidMount(){
    let wraper = this.refs.wraper;
    let timeoutId;
    function callback() {
      const top = wraper.getBoundingClientRect()
      console.log(top)

    }
    //第三个参数 表示冒泡,false表示从内层向外层冒泡,true表示从外层外内层冒泡
    window.addEventListener('scroll',()=>{
      if(this.props.isLoading){
        return
      }
      //setTimeout是用来延迟执行函数,当有timeoutId的时候,则清除,清除之后再延迟执行callback的函数
      if(timeoutId){
        clearTimeout(timeoutId)
      }
      timeoutId = setTimeout(callback,100);

      console.log(1234)
    },false)
  }
}